<template>
  <view>
    <view class="new-car-store-index u-skeleton">
      <!-- 店铺信息 -->
      <view class="store-info">
        <view class="info">
          <view class="logo-title-box">
            <u-image class="u-skeleton-rect"
              :src="result.store.logoImg ? result.store.logoImg + '!/sq/110' : storeDefault" width="110" height="110"
              border-radius="10"></u-image>
            <view class="right">
              <view class="title u-skeleton-rect">
                <text class="text">{{result.store.store_name}}</text>
                <!-- <u-icon name="arrow-right" color="#999" size="24"></u-icon> -->
              </view>
              <text class="type u-skeleton-rect"
                :class="'type-' + result.store.store_type">{{result.store.store_type | formatStoreType}}</text>
            </view>
          </view>
          <view class="follow-btn-box u-skeleton-fillet" :class="{active: result.store.is_favorite }"
            @click="onClickFollowStore">
            <view class="not" v-if="!result.store.is_favorite ">
              <u-icon name="plus"></u-icon>
              <text>关注</text>
            </view>
            <view class="already" v-else>
              <text>已关注</text>
            </view>
          </view>
        </view>

        <view class="address-box">
          <view class="address u-skeleton-rect">
            <text>{{result.store.address}}</text>
          </view>
          <view class="line"></view>
          <view class="navigation-box" @click="onClickNavigation">
            <text class="iconfont icondaohang dh-liner"></text>
            <text class="text u-skeleton-rect">{{result.store.distance}}km</text>
          </view>
        </view>

      </view>

      <!-- 筛选菜单 -->
      <view class="menu-tab"></view>
      <view class="menu-empty" v-show="menuFixed"
        :style="{'height': screeningCriteria.length > 0 ? '168rpx' : '80rpx'}"></view>
      <view class="topsticky">
        <!-- <view :class="{'fixed': menuFixed}" :style="{'top': navbarHeight + 'px'}"> -->
        <view class="menu u-skeleton-rect">
          <block v-for="(item, index) in options" :key="index">
            <view class="item" v-if="item.type ===1" :class="downStatus ? 'down-open':'down-close'">
              <u-dropdown ref="uDropdown" active-color="#FBD321" inactive-color="#666" duration="0"
                @open="onChangeDropDown" @close="downStatus = false">
                <u-dropdown-item :title="item.label">
                  <brand-list @onClickBrand="onClickBrand" />
                </u-dropdown-item>
              </u-dropdown>
            </view>

            <view class="item" v-else @click="onClickReset">
              <text class="text">{{item.label}}</text>
            </view>
          </block>
          <block v-for="(item, index) in options1" :key="item.label">
            <view class="item" @click="onClickMenu(item)" :class="{active: item.selected}">
              <text class="text">{{item.label}}</text>
            </view>
          </block>
        </view>

        <!-- 筛选条件 -->
        <view class="condition" v-if="screeningCriteria.length > 0">
          <view class="condition-list">
            <scroll-view class="scroll-view" scroll-x>
              <view class="condition-item" v-for="(item, index) in screeningCriteria" :key="index">
                <text>{{item.name}}</text>
                <text class="iconfont iconguanbi" @click="onClickDelScreeningCriteria(item, index)"></text>
              </view>
            </scroll-view>
          </view>
          <view class="btn-reset" @click="onClickReset">
            <text class="iconfont iconzhongzhi"></text>
            <text class="text">重置</text>
          </view>
        </view>
      </view>

      <!-- 列表 -->
      <view class="list">
        <!-- 顶部加载状态，只在筛选条件变化时才显示 -->
        <view class="flex flex-jc-c u-m-20" v-if="loading && query.PageIndex === 1 && result.store.storeid">
          <u-loading mode="circle"></u-loading>
        </view>

        <view class="car-item" v-for="(item, index) in result.cars" :key="index" @click="onJumpDetails(item)">
          <view class="top-box">
            <u-image :src="item.goodimg + '!/fw/260'" width="260" height="172"></u-image>
            <view class="info">
              <text class="title">{{item.configuration_name}}</text>
              <view class="tags">
                <view class="tag" v-if="item.isgover === 1"><text>自营</text></view>
                <view class="tag tag-1" v-if="item.rent_out_id"><text>以租代售</text></view>
                <view class="tag tag-2" v-if="item.down_payment_id"><text>一成首付</text></view>
                <view class="tag tag-3" v-if="item.is_loans === 1"><text>巨能降</text></view>
              </view>
              <view class="price-box">
                <text class="mark-price">指导价：{{item.factory_price | formatPrice}}</text>
                <!-- 优惠金额，仅全款类型才展示 -->
                <view class="sell-price" v-if="item.is_loans === 1">
                  <u-icon name="arrow-downward" size="22"></u-icon>
                  <text class="text">{{item.factory_price - item.client_price | formatPrice}}</text>
                </view>
              </view>
            </view>
          </view>
          <!-- 全款类型展示状态 -->
          <view class="bottom-box" v-if="item.is_loans === 1">
            <text class="text">裸车价<text
                class="big">{{item.client_price | formatNum}}</text>{{item.client_price | formatUnit}}</text>
          </view>
          <!-- 月供类型展示状态 -->
          <view class="bottom-box" v-if="item.down_payment_id">
            <text class="text">月供{{item.down_minimum_Monthly_payments}}</text>
            <text class="text">首付<text
                class="big">{{item.down_minimum_down_payment | formatNum}}</text>{{item.down_minimum_down_payment | formatUnit}}</text>
          </view>
          <view class="bottom-box" v-else-if="item.rent_out_id">
            <text class="text">月供{{item.rent_minimum_Monthly_payments}}</text>
            <text class="text">首付<text
                class="big">{{item.rent_minimum_down_payment | formatNum}}</text>{{item.rent_minimum_down_payment | formatUnit}}</text>
          </view>
        </view>

        <u-loadmore :status="status" margin-top="20" />
      </view>

    </view>
    <u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>

<script src="./index.js"></script>

<style>
  page {
    background-color: #f6f6f6;
  }
</style>
<style lang="scss" scoped>
  @import './index.scss';
</style>
